<template>
    <el-form
        ref="goods"
        :model="form_data"
        label-width="80px"
        size="small"
        class="goods-form-container"
        :rules="form_rules"
    >
        <el-form-item label="名称" prop="title">
            <el-input type="text" v-model="form_data.title" />
        </el-form-item>
        <el-form-item label="描述" prop="desc">
            <el-input
                type="textarea"
                v-model="form_data.desc"
                maxlength="50"
                show-word-limit
            />
        </el-form-item>
        <el-row>
            <el-col :span="12">
                <el-form-item label="类目" prop="category">
                    <el-select v-model="form_data.category">
                        <el-option
                            v-for="item in options"
                            :label="item.label"
                            :value="item.value"
                            :key="item.value"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="子类目" prop="c_item">
                    <el-select v-model="form_data.c_item">
                        <el-option
                            v-for="item in c_item[form_data.category]"
                            :label="item"
                            :value="item"
                            :key="item"
                        />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="标签">
            <el-select
                v-model="form_data.tags"
                multiple
                filterable
                allow-create
                default-first-option
                placeholder="请设置产品标签"
                style="width: 100%"
            >
                <el-option
                    v-for="item in form_data.tags"
                    :key="item"
                    :label="item"
                    :value="item"
                >
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="price">
            <el-input type="number" v-model="form_data.price" step="0.1" />
        </el-form-item>
        <el-form-item label="折扣价" prop="price_off">
            <el-input
                type="number"
                step="0.1"
                v-model="form_data.price_off"
                placeholder="不填表示无折扣"
            />
        </el-form-item>
        <el-form-item label="单位" prop="unit">
            <el-input type="text" v-model="form_data.unit" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
            <el-radio v-model="form_data.status" :label="1">上架</el-radio>
            <el-radio v-model="form_data.status" :label="0">下架</el-radio>
        </el-form-item>
        <el-form-item label="图片地址" class="img-box">
            <el-upload
                :action="
                    'https://mallapi.duyiedu.com/upload/images?appkey=' +
                        user_info.appkey
                "
                list-type="picture-card"
                name="avatar"
                :on-preview="handle_preview"
                :on-remove="handle_romove"
                :on-success="handle_success"
                :on-error="handle_error"
                :file-list="file_list"
            >
                <i class="el-icon-plus"></i>
            </el-upload>
        </el-form-item>
        <el-form-item label="库存" prop="inventory">
            <el-input type="number" step="1" v-model="form_data.inventory" />
        </el-form-item>
        <template v-if="is_edit">
            <el-form-item label="销量" prop="sale">
                {{ form_data.sale }}
            </el-form-item>
            <el-form-item label="更新时间" prop="updateTime">
                {{ form_data.updateTime | format_time("time") }}
            </el-form-item>
        </template>
        <el-form-item>
            <el-button type="primary" @click="handle_submit">{{
                btn_text
            }}</el-button>
            <el-button v-if="is_edit" type="info" @click="$router.go(-1)"
                >取消</el-button
            >
            <el-button v-else type="info" @click="handle_reset">重置</el-button>
        </el-form-item>
        <el-dialog :visible.sync="dialog_visible">
            <img width="100%" :src="dialog_img" />
        </el-dialog>
    </el-form>
</template>

<script>
import { get_product, search_category } from "@/api"
import rules from "./rules"
import { mapState } from "vuex"

export default {
    async created() {
        await search_category().then((resp) => {
            this.options = resp.data.map((item) => {
                this.c_item[item.id] = item.c_items
                return { label: item.name, value: item.id }
            })
        })
        if (this.is_edit) {
            get_product(this.$route.params.goods_id).then((resp) => {
                this.form_data = resp
                this.file_list = resp.images.map((item) => {
                    const files = item.split("?")[0].split("/")
                    return {
                        name: files[files.length - 1],
                        url: item
                    }
                })
            })
        }
    },
    props: {
        btn_text: {
            type: String,
            default: "提交"
        }
    },
    computed: {
        ...mapState("user", ["user_info"])
    },
    data() {
        return {
            form_data: {
                tags: [],
                images: []
            },
            ...rules,
            c_item: {},
            options: [],
            is_edit: this.$route.name === "GoodsEdit",
            file_list: [],
            dialog_img: "",
            dialog_visible: false
        }
    },
    methods: {
        handle_submit() {
            this.$refs.goods.validate((valid) => {
                // 表单验证是否成功
                if (valid) {
                    this.$emit("submit", this.form_data)
                }
            })
        },
        handle_reset() {
            this.$refs.goods.resetFields()
        },
        handle_preview(file) {
            this.dialog_img = file.url
            this.dialog_visible = true
        },
        handle_romove(file) {
            this.form_data.images = this.form_data.images.filter(
                (item) => item !== file.url
            )
        },
        handle_success(resp) {
            this.form_data.images.push(resp.data.url)
            this.$message({
                message: "上传成功！",
                type: "success"
            })
        },
        handle_error(err, file, file_list) {
            this.$message({
                message: err,
                type: "error"
            })
            console.log(file, file_list)
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.goods-form-container {
    width: 600px;
    margin: 0 auto;
    .el-tag {
        color: @primary;
        &:hover {
            border-color: @primary;
        }
    }
}
</style>
